<template>
	<view class="recommended-wrapper">
		<scroll-view scroll-x class="law-tabs-wrapper" @scrolltolower="chargeIconListTolower">
			<view class="law-item" v-for="item,index in chargeIconList.list" :class="{'current':item.id == typeId}" :key="item" @click="$emit('chooseCharge',item.id)">
				<u-image :src="chargeIconImageList[index%3]" class="charge-cover" mode="aspectFit" width="212" height="106"></u-image>
				<view class="charge-name">
					{{item.charge_name}}
				</view>
			</view>
		</scroll-view>
		<view class="law-detail-list-wrapper">
			<view class="law-detail-item" v-for="item,index in chargeList" :key="item.id">
				<view class="law-view-wrapper">
					<view class="law-icon-wrapper">
						{{item.charge_name.charAt(0)}}
					</view>
					<view class="law-info-wrapper">
						<view class="law-name">
							{{item.charge_name}}
						</view>
						<!-- 						<scroll-view scroll-x class="law-tag-list">
							<view class="law-tag-item" v-for="item in 10" :key="item">
								侵犯财产罪
							</view>
						</scroll-view> -->
					</view>
				</view>
				<view class="law-terms-list-wrapper">
					<view class="law-terms-item">
						<view class="law-terms-item-title">
							{{item.section.section}}
						</view>
						<view class="law-terms-item-content">
							{{item.section.content}}
						</view>
					</view>
					<view class="law-terms-item">
						<view class="law-terms-item-title">
							常见辩护意见
						</view>
						<view class="law-terms-item-content">
							{{item.familiar_plead}}
						</view>
					</view>
				</view>
				<view class="button-list-wrapper ">
					<view class="related-law-button button-item" @click="$u.route(`/pages_recommended/law_regulation/lawRegulation?id=${item.id}&chargename=${item.charge_name}&type=1`)">
						法律法规（{{item.section_num}}）
					</view>
					<view class="reference-cases-button button-item" @click="$u.route(`/pages_recommended/reference_case/referenceCase?id=${item.id}&chargename=${item.charge_name}`)">
						参考案例（{{item.same_case_num}}）
					</view>
				</view>
				<view class="footer-swiper-wrapper">
					<swiper class="swiper" circular indicator-dots :autoplay="false" indicator-color="#cccccc"
						indicator-active-color="#188CF1">
						<swiper-item>
							<lawRateList :chargeItem="item" />
						</swiper-item>
						<!-- 						<swiper-item>
							<impTermList />
						</swiper-item> -->
						<swiper-item>
							<punishmentMap :chargeItem="item" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lawRateList from "./components/law-rate-list/lawRateList.vue";
	import impTermList from "./components/imp-term-list/impTermList.vue";
	import punishmentMap from "./components/punishment-map/punishmentMap.vue";
	export default {
		components: {
			lawRateList,
			impTermList,
			punishmentMap,
		},
		props: {
			chargeList: {
				type: Array,
			},
			typeId:{
				type:String,
			}
		},
		async created() {
			this.getChargeIconList();
			await this.$loginStatus;
			
		},
		data() {
			return {
				chargeIconList: {
					list: [],
					pageNum: 1,
					pageSize: 3,
					status: 'loadmore',
				},
				chargeIconImageList:[
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/72a34a65-c3be-46a1-979a-29d40f69a4c0.png',
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/f7d8d284-8e7b-464f-aa3d-d5951f145fd8.png',
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/d72b8b8f-b64e-4257-86e1-b74e4ca5d719.png',
				]
			}
		},
		methods: {
			async getChargeIconList() {
				// console.clear()
				if (this.chargeIconList.status == 'loading' || this.chargeIconList.status == 'nomore') {
					return
				}
				this.chargeIconList.status = 'loading';
				const {
					data,total
				} = await this.$u.post(this.$restUrl.chargeIconList, {
					page: this.chargeIconList.pageNum,
					page_num: this.chargeIconList.pageSize,
				})
				console.log(data);
				this.chargeIconList.list.push(...data.data);
				if (this.chargeIconList.length >= total) {
					this.chargeIconList.status = 'nomore';
				} else {
					this.chargeIconList.status = 'loadmore';
					this.chargeIconList.pageNum++;
				}
				console.log('chargeIconList>>>>>>>>>', this.chargeIconList);
			},
			chargeIconListTolower(){
				this.getChargeIconList();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./recommended.scss";
</style>
